<template>
  <div class="list" v-if="currentQuestion">
    <h4>{{index+1}}# {{currentQuestion.title}} <i @click="ceclick" class="el-icon-question"></i></h4>
      <el-checkbox-group v-model="checkList">
        <template v-for="(option,index) in JSON.parse(currentQuestion.options)">
            <el-checkbox :key="index" :label="getLestterIndex(index)">{{getLestterIndex(index)}}){{ option.value}}</el-checkbox>
        </template>
    </el-checkbox-group>
    <el-button-group>
      <el-button type="success" icon="el-icon-arrow-left" @click="topTI" :disabled="index==0">上一题</el-button>
      <el-button type="success" @click="nextTi" :disabled="index== randomSize-1">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false">
          <span>{{currentQuestion.tips}}!</span>
    </el-drawer>   
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      checkList: [],
      drawer: false
    };
  },
  async mounted() {
    this.getQuestions();
  },
  methods: {
    ...mapActions("test", ["getQuestions"]),
    ...mapMutations("test", ["SET_INDEX"]),
    getLestterIndex(index) {
      return String.fromCharCode("A".charCodeAt(0) + index);
    },
    nextTi() {
      this.SET_INDEX(this.index + 1);
      this.checkList = [];
    },
    topTI() {
      this.SET_INDEX(this.index - 1);
      this.checkList = [];
    },
    // 点击弹出
    ceclick() {
      this.drawer = !this.drawer;
    }
  },
  computed: {
    ...mapState("test", ["list", "index", "randomSize"]),
    ...mapGetters("test", ["currentQuestion"])
  }
};
</script>

<style scoped>
.list {
  margin-left: 23px;
}
.el-checkbox-group .el-checkbox {
  display: block;
  margin-bottom: 20px;
}
</style>